<template>
	<view class="body-view">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view
				class="menu-topic-view"
				v-for="item in tabs"
				:id="'tabNum' + item.id"
				:key="item.id - 1"
				@click="swichMenu(item.id - 1)"
			>
				<view :class="currentTab == item.id - 1 ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{ item.name }}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 内容 -->
		<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
			<swiper-item class="swiper-topic-list">
				<view class="swiper-item" style="background-color: #ffffff; border-radius: 20rpx">
					<view
						style="
							display: flex;
							text-align: center;
							border-bottom: 3px solid lightgray;
							font-size: 32rpx;
							line-height: 36px;
						"
					>
						<view style="width: 50%; border-right: 1px solid lightgrey">
							<picker @change="selectChange" :range="teaHouseNameList">
								<label class="select-teahouse">{{ selectDefaultText }}</label>
								<image
									src="../../../static/list-up.png"
									mode=""
									style="width: 32rpx; height: 32rpx"
								></image>
							</picker>
						</view>
						<view style="width: 50%">
							<picker @change="voucherTypeSelectChange" :range="voucherTypeNameOptions">
								<label class="select-teahouse">{{ voucherTypeDefaultText }}</label>
								<image
									src="../../../static/list-up.png"
									mode=""
									style="width: 32rpx; height: 32rpx"
								></image>
							</picker>
						</view>
					</view>

					<view class="voucher-content">
						<view
							v-if="voucherList.length > 0"
							class="block"
							v-for="(item, index) in voucherList"
							:key="index"
						>
							<view class="voucher-desc">
								<view class="voucher-name">
									{{ item.voucherName }}
								</view>
								<view class="voucher-num">可用次数：{{ item.quantity }}次</view>
								<view class="voucher-range">
									<span style="font-weight: bold">可用范围：</span>
									{{ item.teaHouseName }}
								</view>
								<view class="voucher-range">
									<span style="font-weight: bold">有效期至：</span>
									购买后{{ item.validDays }}天内有效
								</view>
								<!--                <view class="voucher-range">
                  <view style="font-weight: bold">
                    使用说明：
                  </view>
                  {{item.remark}}
                </view>-->
							</view>
							<view class="voucher-pay">
								<view class="voucher-price">{{ (item.price / 100).toFixed(2) }}元</view>
								<view class="voucher-origin-price">
									原价{{ (item.originalPrice / 100).toFixed(2) }}元
								</view>
								<view>
									<view class="buy-btn" @click="voucherBuy(item)">购买</view>
								</view>
							</view>
						</view>
						<view
							v-if="voucherList.length == 0"
							style="text-align: center; padding: 10px; width: 100%; color: lightgray; font-size: 14px"
						>
							暂无在售卡券
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-topic-list">
				<view class="swiper-item">
					<view class="tea-pay-app" style="">
						<view class="pay">
							<view class="money">
								<view
									style="font-weight: bold; border-bottom: 1px solid #d8dbe6; padding-bottom: 10rpx"
								>
									充值门店
								</view>
								<view class="recharge">
									<view>
										<picker @change="selectChange" :range="teaHouseNameList">
											<label class="select-teahouse">{{ selectDefaultText }}</label>
											<image
												src="../../../static/list-up.png"
												mode=""
												style="width: 32rpx; height: 32rpx"
											></image>
										</picker>
									</view>
								</view>

								<view
									style="
										font-weight: bold;
										margin-top: 46upx;
										border-bottom: 1px solid #d8dbe6;
										padding-bottom: 10rpx;
									"
									v-if="teaHouseId"
								>
									充值规格
								</view>
								<view class="recharge" v-if="teaHouseId">
									<view
										class="recharge-item"
										:class="{ selected: item.rechargeGiveId == rechargeGiveId }"
										v-for="(item, itemKey) in rechargeGiveList"
										@click="itemClick(item)"
										:key="itemKey"
									>
										<view style="margin: auto">
											<view class="recharge-item-sub1">
												￥{{ item.minMoney / 100 }}
											</view>
											<view class="recharge-item-sub2">到账{{ (item.minMoney + item.giveMoney) / 100 }} </view>
										</view>
									</view>
									<view class="recharge-item"	style="display: none;">
									</view>
									<view class="recharge-item"	 style="display: none;">
									</view>
									
								</view>
								<view class="money" style="margin-top: 30upx; display: none">
									<view
										style="
											font-weight: bold;
											border-bottom: 1px solid #d8dbe6;
											padding-bottom: 10rpx;
										"
									>
										其他金额
									</view>
									<input
										type="number"
										v-model="money"
										placeholder="请输入充值金额"
										style="margin: 20upx 0; padding: 20upx; border: 1upx solid #eee"
									/>
								</view>
							</view>
						</view>

						<view v-if="other" class="pay" style="background: #ffffff; padding: 20upx"></view>
						<view class="submit-button" style="margin-top: 30rpx" @click="toPay">充值</view>

						<view style="padding: 30upx 0 0 0; font-size: 28rpx">
							<view style="font-weight: bold; padding: 0upx 0 10upx 0">备注：</view>
							<view class="" style="margin-bottom: 10rpx;">
								1.充值余额永久有效，不支持退款
							</view>
							<view class="" style="margin-bottom: 10rpx;">
								2.充值余额可用于门店预约、订单续单
							</view>
							<view class="" style="margin-bottom: 10rpx;">
								3.充值余额仅限指定门店使用
							</view>
							<view class="" style="margin-bottom: 10rpx;">
								4.充值余额支持购买套餐
							</view>
							<view class="" style="margin-bottom: 10rpx;">
								5.充值规格默认为您进来时的门店规格
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-topic-list">
				<view class="coupon-input-app">
					<view class="coupon-input" v-if="conponInputDialog.show" style="">
						<image
							src="/static/v3/group_buying_icon.png"
							style="margin: 0 auto; display: block; height: 120upx"
							mode="aspectFit"
						></image>
						<!-- <view style="margin-top: 30upx;text-align: center;font-size: 36upx;font-weight: bold;">美团、大众点评、抖音自助验券</view> -->
						<view style="display: block; margin: 60upx auto 20upx auto; border: 1px solid lightgray">
							<view
								style="
									display: flex;
									justify-content: space-between;
									align-items: center;
									padding: 10rpx 20rpx;
									border-radius: 5rpx;
								"
							>
								<input v-model="item.mtCode" placeholder="请输入卡券兑换码" />
								<image
									src="/static/scan.png"
									style="height: 50rpx; width: 50rpx"
									@click="scanItem"
								></image>
							</view>
						</view>
						<view class="buttons" style="text-align: center">
							<view class="button" @click="submit" style="margin: 40upx auto">兑换</view>
						</view>

						<view style="font-size: 28rpx; font-weight: bold; padding: 20rpx 0rpx; color: #707070">
							温馨提示：
						</view>
						<view style="font-size: 24rpx; color: #999; line-height: 40rpx">
							核销成功后，将转换成优惠券到账户中。请返回首页选择包间下单，并使用优惠券抵扣！
						</view>
					</view>
					<view class="coupon-info-items" v-if="couponInfoDialog.show">
						<view class="coupon-info-item">
							<view class="coupon-title">团购码:</view>
							<view class="coupon-info">{{ couponInfo.code }}</view>
						</view>
						<view class="coupon-info-item">
							<view class="coupon-title">团购套餐:</view>
							<view class="coupon-info">{{ couponInfo.title }}</view>
						</view>
						<view class="coupon-info-item">
							<view class="coupon-title">使用范围:</view>
							<view class="coupon-info">{{ couponInfo.type }}</view>
						</view>
						<view class="coupon-info-item">
							<view class="coupon-title">抵用时长:</view>
							<view class="coupon-info">{{ couponInfo.time }}小时</view>
						</view>
						<view class="buttons">
							<button class="button" @click="useCoupon">确认兑换</button>
							<!--              <button class="button" @click="inputAgain" style="background-color: #4cd964;">重新输入</button>-->
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-topic-list">
				<view class="swiper-item">
					<view class="coupon-content">
						<view
							v-if="couponList.length > 0"
							class="block"
							v-for="(item, index) in couponList"
							:key="index"
							@click="selectCoupon(item)"
						>
							<image src="../../../static/coupon_icon.png" mode="aspectFill" class="coupon-icon"></image>
							<view class="coupon-desc">
								<view class="coupon-name">{{ item.voucherName }}</view>
								<view style="display: flex">
									<view class="coupon-times">剩余{{ item.times }}次</view>
									<view class="coupon-used">已用{{ item.usedTimes }}次</view>
								</view>
								<view class="coupon-validity">
									{{ filterTime(item.validityTimeStart) + '至' + filterTime(item.validityTimeEnd) }}
								</view>
							</view>
						</view>
						<view
							v-if="couponList.length == 0"
							style="text-align: center; padding: 10px; width: 100%; color: lightgray; font-size: 14px"
						>
							暂无可用优惠券
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<customTarbar :selected="1"></customTarbar>
	</view>
</template>

<script>
import globalConfig from '../../../config';
import customTarbar from '@/components/tarbar/custom-tarbar.vue';
const baseHttp = globalConfig.API_HOST;
export default {
	components: {
		customTarbar
	},
	data() {
		return {
			item: {
				mtCode: ''
			},
			statusLabels: ['待开放', '空闲', '使用中', '保洁中', '维护中'],
			couponInfoDialog: {
				show: false
			},
			conponInputDialog: {
				show: true
			},
			couponInfo: {
				code: '',
				price: 0,
				time: 0,
				title: '',
				dealgroupId: '',
				type: ''
			},
			couponList: [],
			voucherList: [],
			selectIndex: 0,
			selectDefaultText: '请选择门店',
			baseHttp: baseHttp,
			teaHouseId: null,
			teaHouseNameList: [],

			voucherTypeDefaultText: '卡券类型',
			voucherTypeOptions: [
				{
					value: 4,
					name: '月卡'
				},
				{
					value: 5,
					name: '季卡'
				},
				{
					value: 6,
					name: '年卡'
				},
				{
					value: 7,
					name: '套餐卡'
				},
				{
					value: 8,
					name: '次卡'
				},
				{
					value: 1,
					name: '小时卡'
				},
				{
					value: 2,
					name: '折扣卡'
				},
				{
					value: 3,
					name: '满减卡'
				}
			],
			voucherType: null,
			voucherTypeNameOptions: ['月卡', '季卡', '年卡', '套餐卡', '次卡', '小时卡', '折扣卡', '满减卡'],
			teaHouseList: [],
			rechargeGiveList: [],
			other: false,
			wxCode: '',
			money: '',
			rechargeGiveId: 0,
			teaConfig: {
				deposit: '',
				vipMoney: '',
				superVipTimes: '',
				subMemberLimit: '',
				remark: ''
			},
			tabs: [
				{
					id: 1,
					name: '卡券'
				},
				{
					id: 2,
					name: '充值'
				},
				{
					id: 3,
					name: '团购券'
				},
				{
					id: 4,
					name: '我的券'
				}
			],
			currentTab: 0,
			tabCurrent: 'tabNum1',
			tabIndex: 0
		};
	},
	onLoad(params) {
		// uni.setStorageSync
		let lastTeaHouseId = uni.getStorageSync('teaHouseId');
		if (lastTeaHouseId) {
			this.teaHouseId = lastTeaHouseId;
		} else {
			this.goPage('/pages/tea/v2/store');
		}
		this.tabIndex = params.tabIndex;
		if (!this.tabIndex) {
			this.tabIndex = 0;
		}
		this.swichMenu(this.tabIndex);
		this.getHouseList();
		let data = {
			pageNO: 1,
			limit: 100
		};
		this.getVoucherList(data);
	},
	methods: {
		scanItem() {
			uni.scanCode({
				success: (res) => {
					if (res.result) {
						this.item.mtCode = res.result;
						this.submit();
					} else {
						this.$Message.error('识别失败');
					}
				}
			});
		},
		useCoupon() {
			this.goPage(
				'/pages/tea/v2/houseList?mtCode=' + this.couponInfo.code + '&dealgroupId=' + this.couponInfo.dealgroupId
			);
		},
		inputAgain() {
			this.conponInputDialog.show = true;
			this.couponInfoDialog.show = false;
		},
		submit() {
			if (this.item.mtCode) {
				uni.showLoading({
					title: '核销中，请稍后'
				});
				this.$api
					.post('/mtconfig/receiptConsume', {
						code: this.item.mtCode,
						teaHouseId: this.teaHouseId
					})
					.then((response) => {
						if (response.ret === 1 && response.data === true) {
							this.$Message.info('核销成功，已转换成优惠券到账户中，您可直接下单抵扣！');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);
						} else {
							this.$Message.error(response.msg);
						}
						uni.hideLoading();
					});
			} else {
				this.$Message.error('请输入团购码');
			}
		},
		voucherBuy(voucher) {
			uni.navigateTo({ url: '/pages/tea/voucher/buy?voucher=' + JSON.stringify(voucher) });
		},
		getCardAndVoucher() {
			this.$api.post('/user/voucher/getUserVoucher', {}).then((response) => {
				if (response.ret === 1) {
					this.couponList = response.data;
				}
			});
		},
		filterTime(time) {
			const date = new Date(time);
			const Y = date.getFullYear();
			const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			const D = date.getDate();
			return `${Y}-${M}-${D}`;
		},
		swichMenu(id) {
			this.currentTab = id;
			id = id + 1;
			this.tabCurrent = 'tabNum' + id;
		},
		swiperChange(e) {
			let index = e.detail.current;
			if (index == 3) {
				this.getCardAndVoucher();
			}
			if (index == 1) {
				this.getRechargeGive();
			}
			this.swichMenu(index);
		},
		getWxCode() {
			wx.login({
				success: (res) => {
					if (res.code) {
						this.wxCode = res.code;
						console.log(this.wxCode);
					}
				}
			});
		},
		voucherTypeSelectChange(e) {
			this.voucherTypeDefaultText = this.voucherTypeOptions[e.target.value].name;
			console.log(this.voucherTypeOptions[e.target.value],99);
			console.log(this.voucherTypeDefaultText);
			this.voucherType = this.voucherTypeOptions[e.target.value].value;
			let data = {
				pageNO: 1,
				limit: 100,
				teaHouseId: this.teaHouseId,
				voucherType: this.voucherType
			};
			this.getVoucherList(data);
		},
		selectChange(e) {
			console.log(e, 777);
			this.selectIndex = e.target.value;
			this.teaHouseId = this.teaHouseList[this.selectIndex].teaHouseId;
			this.selectDefaultText = this.teaHouseList[this.selectIndex].name;
			let data = {
				pageNO: 1,
				limit: 100,
				teaHouseId: this.teaHouseId
			};
			this.voucherTypeDefaultText='卡券类型'
			this.getVoucherList(data);
			this.getRechargeGive();
		},
		getVoucherList(data) {
			this.$api.post('/voucher/config/list', data).then((response) => {
				if (response.ret === 1) {
					this.voucherList = response.data;
					console.log(this.voucherList);
				}
			});
		},
		getHouseList() {
			this.$api
				.post('/teaHouse/queryPage', {
					pageNO: 1,
					limit: 100
				})
				.then((response) => {
					if (response.ret === 1) {
						let page = this;
						page.teaHouseNameList = [];
						page.teaHouseList = response.data;
						console.log(page.teaHouseList);
						response.data.forEach(function (item) {
							page.teaHouseNameList.push(item.name);
						});
					}
				});
		},
		getRechargeGive() {
			this.$api
				.post('/weixin/rechargeGive/getByTeaHouseId', {
					teaHouseId: this.teaHouseId
				})
				.then((response) => {
					console.log('getByTeaHouseId');
					if (response.ret === 1) {
						this.rechargeGiveList = response.data;
					}
				});
		},
		itemClick(item) {
			console.log(item);
			this.rechargeGiveId = item.rechargeGiveId;
			this.money = item.minMoney / 100;
		},
		toPay() {
			if (!this.teaHouseId) {
				this.$Message.error('请选择充值门店');
				return false;
			}
			wx.login({
				success: (res) => {
					if (res.code) {
						this.wxCode = res.code;

						this.$api
							.post('/weixin/recharge', {
								code: this.wxCode,
								teaHouseId: this.teaHouseId,
								money: this.money * 100
							})
							.then((response) => {
								if (response.ret === 1) {
									//console.log(response);
									let json = '{' + response.data + '}';
									json = json.replace(/'/g, '"');
									json = JSON.parse(json);

									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: json.timeStamp,
										nonceStr: json.nonceStr,
										package: json.package,
										signType: json.signType,
										paySign: json.paySign,
										success: (res) => {
											this.$Message.success('支付成功');

											uni.navigateBack({
												delta: 1
											});
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								} else {
									this.$Message.error(response.msg);
								}
							});
					}
				}
			});
		},
		goPage(url) {
			uni.navigateTo({ url: url });
		}
	}
};
</script>

<style scoped lang="scss">
	
.body-view {
	height: 100vh;
	width: 100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	align-items: flex-start;
	justify-content: center;
	background: $uni-theme-color;
}

.top-menu-view {
	display: flex;
	position: fixed;
	font-weight: bold;
	top: 0rpx;
	left: 0;
	width: 100%;
	// background-color: #FFFFFF;
	height: 86rpx;
	line-height: 86rpx;
	// border-bottom: 1rpx solid #d8dbe6;

	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86rpx;
		position: relative;
		width: 25%;
		text-align: center;

		.menu-topic-text {
			font-size: 30rpx;
			color: #fff;
			//padding: 10rpx 40rpx;
		}

		// .menu-topic-act {
		// 	margin-left: 30upx;
		// 	margin-right: 10upx;
		// 	position: relative;
		// 	height: 100%;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// }

		.menu-topic-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;

			.menu-topic-bottom-color {
				width: 40rpx;
				height: 4rpx;
			}
		}

		.menu-topic-act .menu-topic-bottom {
			display: flex;
			justify-content: center;
		}

		.menu-topic-act .menu-topic-bottom-color {
			width: 60%;
			// background: #1D2C6D;
			background: #fff;
		}
	}
}

.swiper-box-list {
	width: 100%;
	padding-top: 120rpx;
	flex: 1;
	// background-color: #FFFFFF;
	.swiper-topic-list {
		overflow: scroll;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
	}
}

.page-section,
.page-body,
.tea-manager-app {
}

.select-teahouse {
	text-align: center;
	color: $uni-theme-color;
}

.recharge {
	margin-top: 30upx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	.recharge-item {
		display: inline-flex;
		border: 1px solid #707070;
		width: 180upx;
		height: 120upx;
		text-align: center;
		border-radius: 10upx;
		margin-bottom: 20upx;
		.recharge-item-sub1 {
			width: 180upx;
			font-weight: bold;
		}
		.recharge-item-sub2 {
			width: 180upx;
			font-size: 24upx;
			margin-top: 10upx;
		}
	}

	.selected {
		// border: 1px solid #1D2C6D;
		border: 1px solid $uni-theme-color;
		// color: #1D2C6D;
		color: $uni-theme-color;
	}
}

.tea-pay-app {
	background: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	color: #707070;
	padding: 40rpx 30rpx;

	.info-item {
		background-color: white;
		display: flex;
		padding: 37upx;
		font-size: 28upx;
		border-bottom: 1upx solid #eee;
		.icon {
		}
		.value {
			margin-left: 20upx;
		}
	}

	.info {
		height: 217upx;
		text-align: center;
		line-height: 217upx;
		background-color: white;
		margin: 30upx 0;
		.money {
			font-weight: bold;
			font-size: 100upx;
		}
	}

	.submit-button {
		font-size: 40upx;
		margin: 0 auto;
		// background-color:#1D2C6D;
		background-color: $uni-theme-color;
		color: white;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 56upx;
		font-size: 32rpx;
		font-weight: 700;
	}
}

.coupon-content {
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	.block {
		height: 180rpx;
		display: flex;
		// border-bottom: gainsboro 1px dashed;
		// border-top: gainsboro 1px dashed;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		padding: 20rpx 30rpx;
		image {
			width: 80rpx;
			height: 80rpx;
			justify-content: center;
		}
		.coupon-desc {
			padding-left: 40rpx;
			justify-content: center;
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #606266;

			.coupon-name {
				display: inline-list-item;
				font-size: 32rpx;
				font-weight: bold;
			}

			.coupon-times {
				// color: #1D2C6D;
				color: $uni-theme-color;
				margin-top: 10rpx;
			}

			.coupon-used {
				color: orange;
				margin-left: 20rpx;
				margin-top: 10rpx;
			}

			.coupon-validity {
				display: inline-list-item;
				color: lightgrey;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
		.coupon-icon {
			width: 160rpx;
			height: auto;
			padding-right: 40rpx;
			border-right: 2rpx solid #faf7fa;
		}
	}
}

.voucher-content {
	width: 100%;
	height: auto;
	flex-wrap: wrap;
	.block {
		//height: 180rpx;
		display: flex;
		border-bottom: gainsboro 1px dashed;
		border-top: gainsboro 1px dashed;

		.voucher-num {
			// color: #1D2C6D;
			color: $uni-theme-color;
			line-height: 52rpx;
		}

		.voucher-range {
			margin-top: 20rpx;
		}
		.voucher-pay {
			width: 30%;
			padding-top: 70rpx;

			.buy-btn {
				// background: #1D2C6D;
				background: $uni-theme-color;
				padding: 10rpx 20rpx;
				width: 100rpx;
				text-align: center;
				color: #ffffff;
				border-radius: 8rpx;
				margin-top: 26rpx;
			}

			.voucher-price {
				color: #eb4b17;
				font-weight: bold;
			}

			.voucher-origin-price {
				color: grey;
				font-size: 28rpx;
				margin-top: 10rpx;
				text-decoration: line-through;
			}
		}
		.voucher-desc {
			width: 70%;
			padding: 20rpx 30rpx;
			justify-content: center;
			margin-top: 16rpx;
			font-size: 28rpx;
			color: #606266;

			.voucher-name {
				display: inline-list-item;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 46rpx;
				image {
					display: none;
					height: 56rpx;
					width: 80rpx;
					justify-content: center;
				}
			}

			.voucher-validity {
				display: inline-list-item;
				color: lightgrey;
				font-size: 26rpx;
				margin-top: 26rpx;
			}
		}
		.voucher-icon {
			margin-left: 36rpx;
			width: 160rpx;
			height: auto;
		}
	}
}

.coupon-input-app {
	background-color: #fff;
	font-size: 28upx;
	border-radius: 20rpx !important;
	overflow: hidden;
	padding: 80rpx 40rpx;
	.coupon-info-items {
		background-color: white;
		padding: 20upx;
		.coupon-info-item {
			display: flex;
			padding: 20upx;
			.coupon-title {
				width: 200upx;
			}
			.coupon-info {
				flex: 1;
			}
		}
	}

	.input {
		padding: 20upx;
		border: 1upx solid #eee;
		background-color: white;
	}
	.buttons {
		.button {
			margin: 20upx;
			// background-color:#1D2C6D;
			background-color: $uni-theme-color;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 40rpx;
			color: white;
			font-size: 28rpx;
		}
	}
}
</style>
